import type { App, Component } from "vue";
import ViewBlock from "./basic/ViewBlock.vue";
import ImageBlock from "./basic/ImageBlock.vue";
import ButtonBlock from "./external/ButtonBlock.vue";

export type TBlock = {
    type: string
    material: Component
}
const baseBlocks: TBlock[] = [
    {
        type: 'view',
        material: ViewBlock
    },
    {
        type: 'image',
        material: ImageBlock
    }
]

export type TBlocksMap = Record<string, TBlock>

class BlockSuite {
    private blocks = baseBlocks
    constructor() {}
    getBlocksMap(): TBlocksMap {
        // 将数组转换为对象结构 {view: { type: 'view', material: xxx}}
        return Object.fromEntries(this.blocks.map(block => [block.type, block]))
    }
    addBlock(block: TBlock) {
        this.blocks.push(block)
    }
    getBlocks() {
        return this.blocks
    }
    hasBlock(type: string) {
        return this.blocks.some(block => block.type === type)
    }
}

const blockSuite = new BlockSuite()

blockSuite.addBlock({
    type: 'button',
    material: ButtonBlock
})

const blocksMap = blockSuite.getBlocksMap()
export const symbolBlocksMap = Symbol('blocksMap')

export default function setupBlocks(app: App) {
    const ins = (app: App) => {
        app.provide(symbolBlocksMap, blocksMap)
        app.config.globalProperties.$blockMap = blocksMap
    } 
    app.use(ins)
}